<template>
	<el-form ref="form" :model="user" :rules="rules" label-width="80px">
		<el-form-item label="旧密码" prop="oldPassword">
			<el-input v-model="user.oldPassword" placeholder="请输入旧密码" type="password" show-password />
		</el-form-item>
		<el-form-item label="新密码" prop="newPassword">
			<el-input v-model="user.newPassword" placeholder="请输入新密码" type="password" show-password />
		</el-form-item>
		<el-form-item label="确认密码" prop="confirmPassword">
			<el-input v-model="user.confirmPassword" placeholder="请确认新密码" type="password" show-password />
		</el-form-item>
		<el-form-item>
			<el-button type="danger" size="mini" @click="submit">修改</el-button>
		</el-form-item>
	</el-form>
</template>

<script>
	import userApi from "@/api/user.js";

	export default {
		data() {
			const equalToPassword = (rule, value, callback) => {
				if (this.user.newPassword !== value) {
					callback(new Error("两次输入的密码不一致"));
				} else {
					callback();
				}
			};
			return {
				userInfo: {},
				user: {
					oldPassword: undefined,
					newPassword: undefined,
					confirmPassword: undefined
				},
				// 表单校验
				rules: {
					oldPassword: [{
						required: true,
						message: "旧密码不能为空",
						trigger: "blur"
					}],
					newPassword: [{
							required: true,
							message: "新密码不能为空",
							trigger: "blur"
						},
						{
							min: 6,
							max: 20,
							message: "长度在 6 到 20 个字符",
							trigger: "blur"
						}
					],
					confirmPassword: [{
							required: true,
							message: "确认密码不能为空",
							trigger: "blur"
						},
						{
							required: true,
							validator: equalToPassword,
							trigger: "blur"
						}
					]
				}
			};
		},
		methods: {
			async submit() {
				const res = await userApi.changePassword("/znUsers/changePassword",{
					username: this.userInfo.userName,
					oldPassword: this.user.oldPassword,
					confirmPassword: this.user.confirmPassword
				});
				if(res.code==200){
					this.$message({
					    showClose: true,
					    message: res.msg,
					    type: 'success'
					});
					this.logout();
				}else{
					this.$message({
					    showClose: true,
					    message: res.msg,
					    type: 'error'
					});
				}
			},
			logout() {
				localStorage.removeItem("userInfo");
				localStorage.removeItem("token");
				this.$router.push("/Login");
			},
		},
		created() {
			this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
		}
	};
</script>